<template>
    <div>
    <div class="hea">
        <router-link to="/wode"><img :src="img1"></router-link>
        <h4>{{a1}}</h4>
    </div>
    <div class="ren">
        <ul>
            <li><h4>{{a2}}</h4><img :src="img2" alt=""></li>
            <li><h4>{{a3}}</h4><span>{{a4}}</span></li>
        </ul>
    </div>
    <div class="ban">
        <h4>{{a5}}</h4>
        <ul>
            <li><p><img :src="img3" alt=""> {{a6}}</p><span>{{a7}}</span></li>
            <li><p><img :src="img4" alt=""> {{a8}}</p><span>{{a9}}</span></li>
            <li><p><img :src="img5" alt=""> {{a10}}</p><span>{{a11}}</span></li>
            <li><p><img :src="img6" alt=""> {{a12}}</p><span>{{a11}}</span></li>
            <li><p><img :src="img7" alt=""> {{a13}}</p><span>{{a11}}</span></li>
        </ul>
    </div>
    <div class="ban">
        <h4>{{a14}}</h4>
        <ul>
            <li><p> {{a15}}</p><span>{{a16}}</span></li>
            <li><p> {{a17}}</p><span>{{a18}}</span></li>
        </ul>
    </div>
       
    </div>   
</template>
<script>
export default {
    data () {
        return {
            wode:'我的',
            img1:require('../img/a15.png'),
            img2:require('../img/a16.png'),
            img3:require('../img/a17.png'),
            img4:require('../img/a18.png'),
            img5:require('../img/a19.png'),
            img6:require('../img/a20.png'),
            img7:require('../img/a21.png'),

            a1:'账户与安全',
            a2:'头像',
            a3:'用户名',
            a4:'2****c',
            a5:'账号绑定',
            a6:'手机',
            a7:'150****5226',
            a8:'微信',
            a9:'已绑定',
            a10:'QQ',
            a11:'未绑定',
            a12:'微博',
            a13:'淘宝',
            a14:'安全设置',
            a15:'登陆密码',
            a16:'未设置',
            a17:'支付密码',
            a18:'修改密码',
        }
    }
}

</script>
<style>
.hea{
    display: flex;
    background: #0091fe;
    height: 60px;
    align-items: center;
}
.hea h4{
    padding-left: 7%;
    color:#fff;
    font-size: 20px;
    font-weight: bold;
}
.hea img{
    height:50%;
    padding-left: 7%;
}
.ren{
    border-bottom: 10px solid#f5f5f5;
    border-top:10px solid#f5f5f5;
}
.ren li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid#f5f5f5;
}
.ren li img{
    padding:3% 3% 3% 0;
}
.ren li h4{
    padding: 3%;
}
.ren li span{
     padding:3%  10%;
     color:#ccc;
}
.ban h4{
    justify-content: flex-start;
    padding:3%;
    border-bottom:2px solid#f5f5f5;
}
.ban li{
    display: flex;
    border-bottom: 2px solid#f5f5f5;
    align-items: center;
    justify-content: space-between;
}
.ban li p{
     padding:3%;
    display: flex;
     align-items: center;
 }
.ban li  p img{
   padding-right: 10%;
    width:24%;
}
</style>